<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input :placeholder="$t('table.placeholder')" clearable v-model="query"></el-input>
                </el-col>
                <el-col :span="5">
                    <el-button type="primary" @click="Search" icon="el-icon-search">{{ $t('table.search') }}</el-button>
                    <el-button type="primary" @click="open('add')">{{ $t('table.adduser') }}</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="#" type="index" fixed="left"> </el-table-column>
                <el-table-column :min-width="item.width" :fixed="item.fixed" :prop="item.prop" :label="$t(`table.${item.label}`)" v-for="(item, index) in options" :key="index">
                    <!-- 解构插槽 v-slot==v-slot:default -->
                    <template v-slot="{ row }" v-if="item.prop === 'add_time'">
                        {{ $filters.filterTime(row.add_time) }}
                    </template>
                    <!-- 具名插槽 #default== v-slot:default -->
                    <template #default="scope" v-else-if="item.prop === 'action'">
                        <el-button type="primary" icon="el-icon-edit" size="small" @click="editOpen('edit',scope.row)">
                        </el-button>
                        <el-button type="warning" size="small" icon="el-icon-setting" @click="distribution(scope.row)">
                        </el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteUser(scope.row,scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <Dialog :visible.sync="visible" :type="type" @done="reload" :userInfo="userInfo"></Dialog>
            <Distribution :visible_D.sync="visible_D" @done="reload" :userInfo="userInfo"></Distribution>

        </el-card>
        <router-view></router-view>
    </div>

</template>

<script>
import { GetGoodsList, DeleteGoods, SearchGoodsList } from '@/api/http'
import { options } from './options';
import EditDialogVue from '../components/Dialog.vue';
import Dialog_twoVue from '../components/Dialog_two.vue';

export default {
    name: 'goods',
    components: {
        Dialog: EditDialogVue,
        Distribution: Dialog_twoVue
    },
    data() {
        return {
            query: '',
            tableData: [],
            pagenum: 1,
            pagesize: 5,
            total: 20,
            options: options,
            visible: false,
            type: '',
            userInfo: {},
            visible_D: false
        }
    },
    mounted() {
        this.GetGoodsList()
    },
    methods: {
        /* 刷新表格 */
        reload() {
            this.GetGoodsList()
        },
        // 搜索
        Search() {
            this.GetGoodsList()
        },
        //获取用户列表
        async GetGoodsList() {
            const { data, meta } = await GetGoodsList({
                query: this.query,
                pagenum: this.pagenum,
                pagesize: this.pagesize
            })
            if (meta.status == 200) {
                this.total = data.total
                this.tableData = data.goods
            }
        },
        //当前页码
        handleSizeChange(val) {
            this.pagesize = val;
            this.GetGoodsList()
        },
        //每页显示多少条
        handleCurrentChange(val) {
            this.pagenum = val
            this.GetGoodsList()
        },
        open(type) {
            this.$router.push('/goods/addGoods')
            return
            this.type = type;
            this.userInfo = {};
            this.visible = true;
        },
        editOpen(type, row) {
            this.$router.push('/goods/addGoods')
            return
            this.type = type;
            this.userInfo = row
            this.visible = true;
        },
        deleteUser(row, index) {
            this.$confirm(this.$t('dialog.deleteTitle'), '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const { data, meta } = await DeleteGoods({ id: row.goods_id })
                if (meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.GetGoodsList()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        distribution(row) {
            this.userInfo = row
            this.visible_D = true;
        }
    },
}
</script>

<style lang="scss" scoped>
</style>